<template>
  <div class="resource">
    <div class="operate">
      <div class="search-container">
        <el-input class="search-input" :prefix-icon="Search" size="large"></el-input>
        <div class="search-btn">搜索</div>
      </div>
      <div class="select-container">
        <el-form label-width="80px" label-suffix=":">
          <el-form-item label="资源类型">
            <el-select v-model="classification" style="width: 191px;" @change="classificationHandler">
              <el-option label="全部资源" value=""></el-option>
              <el-option label="作品" :value="'original'"></el-option>
              <el-option label="教程" :value="'course'"></el-option>
              <el-option label="动态" :value="'information'"></el-option>
              <el-option label="专题" :value="'specialTopic'"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form label-width="80px" label-suffix=":">
          <el-form-item label="状态">
            <el-select v-model="status" style="width: 191px;" @change="statusHandler">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="已发布" :value="1"></el-option>
              <el-option label="未发布" :value="2"></el-option>
              <el-option label="审核中" :value="3"></el-option>
              <el-option label="审核未通过" :value="4"></el-option>
              <el-option label="仅主页可见" :value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData"
        :header-row-style="{ height: '44px', 'background-color': '#f5f7f9', color: '#393939' }"
        :row-style="{ height: '138px', padding: '8px 0' }">
        <el-table-column label="内容" align="center" :width="410">
          <template #default="{ row, $index }">
            <div class="info">
              <div class="avatar">
                <img :src="row.cover">
              </div>
              <div class="text">
                <div class="title">{{ row.title }}</div>
                <div class="dynamic">动态</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" align="center" :width="150" prop="updateTime" :formatter="formatterHandler">
        </el-table-column>
        <el-table-column label="数据" align="center">
          <template #default="{ row, $index }">
            <div class="icon-list">
              <div class="icon-item">
                <i class="icon iconfont icon-dianzan"></i>
                <span class="count">{{ row.statisticsBackup.praiseCount }}</span>
              </div>
              <div class="icon-item">
                <i class="icon iconfont icon-pinglun"></i>
                <span class="count">{{ row.statisticsBackup.commentCount }}</span>
              </div>
              <div class="icon-item">
                <i class="icon iconfont icon-shoucang"></i>
                <span class="count">{{ row.statisticsBackup.favoriteCount }}</span>
              </div>
              <div class="icon-item">
                <i class="icon iconfont icon-chakan"></i>
                <span class="count">{{ row.statisticsBackup.viewCount }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row, $index }">
            <div v-if="row.status == '1'">已发布</div>
            <div v-if="row.status == '2'">未发布</div>
            <div v-if="row.status == '3'">审核中</div>
            <div v-if="row.status == '4'">审核未通过</div>
            <div v-if="row.status == '5'">仅主页可见</div>
            <div v-if="row.status == '4'" class="reason" @click="LookReason(row)">查看原因</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row, $index }">
            <div class="ahover" v-if="row.status != '1' && row.status != '4'" @click="publishHandler(row)">发布</div>
            <div class="ahover" v-if="row.status == '1' && row.status == '3'" @click="unPublishHandler(row)">取消发布</div>
            <div class="ahover" v-if="row.status != '1' && row.status != '3'" @click="editHandler(row)">编辑</div>
            <div class="ahover" @click="deleteHandler(row)">删除</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import useResourceStore from '@/store/modules/resource';
import { computed, onMounted, ref } from 'vue';
import type { ContentModel } from '@/api/resource'
import moment from 'moment'
import { ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus';
import { useRouter } from 'vue-router'
const resourceStore = useResourceStore();
const pageSize = ref(10)
// 收集资源类型
const classification = ref('')
// 收集状态
const status = ref(0)

const getTableData = () => {
  resourceStore.getDynamicData({
    pageSize: pageSize.value,
    pageNum: 0,
    classification: classification.value,
    status: status.value
  })
}

const classificationHandler = (val: string) => {
  classification.value = val
  getTableData();
}

const statusHandler = (val: number) => {
  status.value = val
  getTableData();
}
onMounted(() => {
  getTableData();
})
const tableData = computed(() => {
  return resourceStore.dynamicData.content
})
const formatterHandler = (row: ContentModel, column: any, cellValue: string, index: number) => {
  return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
}
// 查看原因
const LookReason = (row: ContentModel) => {
  ElMessageBox.alert(row.remark, {
    confirmButtonText: '确定'
  })
}
// 删除
const deleteHandler = async (row: ContentModel) => {
  try {
    await ElMessageBox.confirm(
      '此操作将删除该项,是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await resourceStore.deleteData(row.id)
    getTableData();
    ElMessage.success('删除成功')
  } catch (error) {
    ElMessage.error('删除失败')
  }
}
// 取消发布
const unPublishHandler = (row: ContentModel) => {
  resourceStore.unPublish(row.id)
  getTableData();
}
// 发布
const publishHandler = (row: ContentModel) => {
  resourceStore.publish({
    publishType: row.momentClassificationBackup.classification,
    momentId: row.id
  })
  getTableData();
}
const router = useRouter()
const editHandler = (row: ContentModel) => {
  router.push({
    name: 'Edit',
    query: {
      momentId: row.id
    }
  })
}
</script>

<style lang="less" scoped>
.resource {
  width: 100%;
  background: #fff;

  .operate {
    padding: 16px 30px;
    display: flex;

    .search-container {
      width: 372px;
      display: flex;
      padding-right: 30px;

      .search-input {
        width: 270px;
        height: 40px;
        ::v-deep(.el-input__wrapper) {
          background-color: #f5f7f9;
          border: none;
          outline: none;
        }
      }

      .search-btn {
        width: 62px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        margin-left: 10px;
        background: #f5f7f9;
        color: #7d8090;
        border-radius: 5px;
        cursor: pointer;
      }
    }

    .select-container {
      display: flex;
    }
  }

  .content {
    width: 100%;
    min-height: 700px;
    padding: 0 30px;

    ::v-deep(.el-table__cell) {
      background-color: #f5f7f9;
    }
    ::v-deep(.el-table .cell) {
      padding: 0 10px;
    }

    .info {
      width: 390px;
      height: 121px;
      padding: 10px 0;
      display: flex;

      .avatar {
        width: 169px;
        height: 101px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        height: 101px;
        padding-left: 17px;

        .dynamic {
          padding-top: 14px;
          color: #7d8090;
          text-align: left;
        }
      }
    }

    .icon-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .icon-item {
        width: 57px;
        height: 46px;
        display: flex;
        flex-direction: column;

        .icon {
          font-size: 12px;
        }

        .count {
          width: 100%;
          height: 23px;
          text-align: center;
          line-height: 23px;
          font-size: 12px;
        }
      }
    }



    .reason {
      cursor: pointer;
      color: #fd5911;
    }

    .ahover:hover {
      cursor: pointer;
      color: #fd5911;
    }
  }
}
</style>